<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
      }

      /* 第一个作业 */
      @keyframes move {
        from {
            transform: translateX(-300px);
            /* background-color: black; */
        }
        to {
            transform: translateX(0px);
            /* background-color: black; */
        }
      }

      .box {
        width: 300px;
        height: 50px;
    
        background-color: rgb(237, 231, 231);
        /* background:linear-gradient  */
      }
      .box2 {
        width: 300px;
        height: 50px;
        animation:move 2s linear infinite;
        /* animation-name: move; */
        background-color: #000;
      }


      @keyframes moing {
        from {
            transform: translateX(-300px);
            /* background-color: black; */
        }
        to {
            transform: translateX(0px);
            background:linear-gradient(90deg, pink 20%, skyblue 70%)
            /* background-color: black; */
        }
      }

  /* 第二个作业 */
      .bigbox {
        margin-top:20px ;
        width: 300px;
        height: 50px;
        border-radius:20px ;
        overflow: hidden;
        /* margin-bottom: 10px; */
        background-color:#FFF;
        /* background:linear-gradient  */
      }
      .box3 {
     
        width: 300px;
        height: 50px;
        /* border-radius: ; */
        animation:moing 2s infinite;
        /* overflow: hidden; */
        /* animation-name: move; */
        /* background:linear-gradient(90deg pink skyblue); */
      }


      .head{
            width: 300px;
            height: 40px;
            background-color: rgb(206, 205, 205);
            background: repeating-linear-gradient(45deg,rgb(220, 219, 219) 0px 15px,rgb(240, 240, 240) 15px 30px); 
            border-radius: 20px;
            margin-top: 30px;
            overflow: hidden;
        }
        .head3{
            width: 300px;
            height: 40px;
            background: repeating-linear-gradient(45deg,rgb(246, 31, 96) 0px 15px,orange 15px 30px); 
            animation: noe 2.5s infinite;
            /* position: absolute; */
            /* top: 10px; */
            /* transition:all 1s ease; */
            /* transform-origin: 0%; */
        }
        @keyframes noe{
            0%{
                width: 0;
                /* transform: translatex(-300px); */
            }
            100%{
                width: 300px;
                /* transform: translatex(0px); */
            }
        }
   

    /* 第四个 */
    @keyframes four{
            100%{
                width: 120%;
            }
        }
   
        .main{
            width: 200px;
            height: 40px;
            background: repeating-linear-gradient(90deg,rgb(220, 219, 219) 0px 30px,#fff 0px 40px); 
            /* border-radius: 20px; */
            margin-top: 30px;
            overflow: hidden;
        }
        .main1{
          width: 0;
            height: 40px;
            /* animation-delay:2s; */
            background: repeating-linear-gradient(90deg,#000 0px 30px,#fff 0px 40px); 
            animation: four 4s steps(6) infinite;
            /* position: absolute; */
            /* top: 10px; */
            /* transition:all 1s ease; */
            /* transform-origin: 0%; */
        }

    </style>
  </head>
  <body>
    <div class="box">
      <div class="box2"></div>
    </div>

    <div class="bigbox">
      <div class="box3"></div>
</div>
      <div class="head">
        <div class="head3"></div>
    </div>

    <div class="main">
      <div class="main1"></div>
  </div>

  </body>
</html>
